<template>
    <div className="map-box">
        <div id="container"></div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    import "cesium/Widgets/widgets.css";
    // import {useRoute} from "vue-router";
    // const route = useRoute();
    // const { url } = route.params;

    var Cesium = require("cesium/Cesium");
    var Cesiumx = require("cesiumx");
    export default {
        name: "",
        data() {
            return {
                truck_space_name: [],
                status: '',
            };
        },
        mounted() {

            let viewer = new Cesiumx.Viewer("container", {
                terrainProvider: new Cesium.CesiumTerrainProvider({
                    url: "http://218.85.23.37:28099/terrain_fj/dem_30M/",
                })
            });

            viewer._cesiumWidget._creditContainer.style.display = "none"; //版权控件的显示隐藏

            //post请求
            var parkList = [];

            let layer = new Cesiumx.layers.TilesetLayer({
                tileset: {
                    url: "http://218.85.23.37:28099/sanming/sm20210107/tileset.json",
                },
                viewer: viewer,
            });
            viewer.zoomTo(layer.tileset);

            //车位信息
            let promise = Cesium.GeoJsonDataSource.load("qlldxel.json");
            //console.log(window.location.host);
            promise.then(function (dataSource) {
                for (let j = 0; j < dataSource._entityCollection._entities._array.length; j++) {
                    if (j >= 200 && j <= 283)
                        continue
                    viewer.entities.add(dataSource._entityCollection._entities._array[j]); //加载车位信息

                }
                let entities = dataSource.entities.values;
                //同步获取数据库的车位数据
                for (let i = 0; i < 201; i++) {
                    let entity = entities[i];
                    let name = entity.name;
                    $.ajax({
                        //url: this.$route.params.url+'berth/parkRecording',
                        url: 'http://muse.cheboyi.com/lt/berth/parkRecording',
                        type: "POST", //GET
                        async: true, //或false,是否异步
                        data: {
                            truckSpaceName: name,
                        },
                        success: function (response) {
                            parkList.push(response.data);
                        },
                    });
                }
                //注册点击事件
                var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                //注册气泡事件
                var handler3D = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                //单击获取车位名称
                let pick;
                handler.setInputAction(function (movement) {

                    pick = viewer.scene.pick(movement.position);

                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                let infoDiv =
                    '<div id="trackPopUp" class="trackPopUp">' +
                    // '<  div id="trackPopUpContent" class="leaflet-popup" style="top:5px;left:0;">' +
                    '<a class="leaflet-popup-close-button" href="#"></a>' +
                    '<div class="leaflet-popup-content-wrapper">' +
                    '<div id="trackPopUpLink" class="leaflet-popup-content"></div>' +
                    "</div>" +
                    "</>" +
                    "</div>";
                $("#container").append(infoDiv);

                // 显示车位颜色
                let timesRun = 0;

                var interval = setInterval(function clock() {
                    for (let i = 0; i < entities.length; i++) {
                        //console.log(entities[i]);
                        let entity = entities[i];
                        let name = entity.name;
                        for (let j = 0; j < parkList.length; j++) {

                            if (parkList[j].status == "占用" && parkList[j].truckSpaceName == name) {
                                entity.polygon.material = Cesium.Color.RED;
                                entity.polygon.outline = true,
                                    entity.polygon.outlineColor = Cesium.Color.YELLOW;
                                break;
                            } else if (parkList[j].status == "空闲" && parkList[j].truckSpaceName == name) {
                                entity.polygon.material = Cesium.Color.BLUE;
                                entity.polygon.outline = true,
                                    entity.polygon.outlineColor = Cesium.Color.GREEN;
                                break;
                            } else if (((parkList[j].status).indexOf("占用") < 0 && (parkList[j].status).indexOf("空闲") < 0)) {
                                parkList.splice(j, 1);
                            }
                        }
                    }
                    timesRun += 1;
                    if (timesRun === 212) {
                        clearInterval(interval);
                    }

                }, 1000);


                //绑定鼠标单击
                handler3D.setInputAction(function (movement) {
                    pick = viewer.scene.pick(movement.position);
                    if (pick && pick.id) {
                        $('#trackPopUp').show();
                        let content = '';
                        for (let k = 0; k < parkList.length; k++) {
                            let in_result = parkList[k].comeInUrl.split(",");
                            let out_result = parkList[k].getOutUrl.split(",");
                            if (pick.id.name == parkList[k].truckSpaceName) {
                                content += '<div class="hoverth">' + "三明停车" + '</div><table class="hovertable">';
                                content += '<tr><td>' + '泊位号' + '</td><td>' + pick.id.name + '</td></tr>';
                                content += '<tr><td>' + '泊位状态' + '</td><td>' + parkList[k].status + '</td></tr>';
                                content += '<tr><td>' + '开始时间' + '</td><td>' + parkList[k].startTime + '</td></tr>';
                                if (parkList[k].endTime != '') {
                                    content += '<tr><td>' + '结束时间' + '</td><td>' + parkList[k].endTime + '</td></tr>';
                                    content += '<tr><td>' + '停车时长' + '</td><td>' + parkList[k].sumTime + '</td></tr>';
                                }
                                content += '<tr><td>' + '车牌' + '</td><td>' + parkList[k].licencePlate + '</td></tr>';
                                content += '<tr><td>' + '设备号' + '</td><td>' + parkList[k].imei + '</td></tr>';
                                content += '<tr><td>' + '进场图片' + '</td><td>' + '<img src=' + in_result[0] + '>' + '</td></tr>';
                                if (out_result[0] != '')
                                    content += '<tr><td>' + '离场图片' + '</td><td>' + '<img src=' + out_result[0] + '>' + '</td></tr>';

                            }

                        }
                        content += '</table>';
                        var obj = {position: movement.position, content: content};

                        infoWindow(obj);

                        function infoWindow(obj) {
                            var picked = viewer.scene.pick(obj.position);
                            if (Cesium.defined(picked)) {
                                var id = Cesium.defaultValue(picked.id, picked.primitive.id);
                                if (id instanceof Cesium.Entity) {
                                    $(".cesium-selection-wrapper").show();
                                    $('#trackPopUpLink').empty();
                                    $('#trackPopUpLink').append(obj.content);

                                    function positionPopUp(c) {
                                        var x = c.x - ($('#trackPopUpContent').width()) / 2;
                                        var y = c.y - ($('#trackPopUpContent').height());
                                        $('#trackPopUpContent').css('transform', 'translate3d(' + x + 'px, ' + y + 'px, 0)');
                                    }

                                    var c = new Cesium.Cartesian2(obj.position.x, obj.position.y);
                                    $('#trackPopUp').show();
                                    positionPopUp(c); // Initial position
                                    $('.leaflet-popup-close-button').click(function () {
                                        $('#trackPopUp').hide();
                                        $('#trackPopUpLink').empty();
                                        $(".cesium-selection-wrapper").hide();
                                        return false;
                                    });
                                    return id;
                                }
                            }
                        }
                    } else {
                        $('#trackPopUp').hide();
                    }

                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            });
            viewer.flyTo(promise);

            let agLayer = new Cesiumx.layers.ImageryLayer({
                name: "三明影像",
                type: "WMTS",
                provider: {
                    url:
                        "http://gis.fjjwch.com:28006/arcgis/rest/services/sanming/SM/MapServer/WMTS?",
                    layer: "0",
                    tileMatrixSetID: "default",
                    style: "default",
                    tilingScheme: new Cesium.GeographicTilingScheme(),
                    maximumLevel: 18,
                },
                viewer: viewer,
            });

        },
        methods: {
            cartView: function () {
                this.$http.get("/api/carData").then(response => {
                    var res = response.data;
                    console.log(response);
                });
            }
        }
    };
</script>
<style>
    .map-box {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #container {
        position: relative;
        width: 100%;
        height: 450px;
    }

    .trackPopUp {
        /* display:inline; */
        color: rgb(0, 0, 0);
    }

    .leaflet-popup {
        position: absolute;
    }

    .leaflet-popup-close-button {
        position: relative;
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
        text-align: center;
        font: 25px/25px Tahoma, Verdana, sans-serif;
        color: rgb(230, 20, 20);
        text-decoration: none;
        font-weight: bold;
        background: transparent;

    }

    .leaflet-popup-content-wrapper {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-height: 80%;
        overflow-y: auto;
        overflow: hidden;
        /*width: 70%;*/
        /*padding: 1px;*/
        margin-top: 50px;
        text-align: left;
        border-radius: 12px;

    }

    .leaflet-popup-content {
        margin: 5px 5px;
        line-height: 1.4;
        /*padding-top: 50px;*/
        /*padding-left: 120px;*/
    }

    div.hoverth {
        background-color: #c3dde0;
        font-family: verdana, arial, sans-serif;
        font-size: 20px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        text-align: center;
        width: 215.8px;
    }

    table.hovertable {
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        color: #333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
        text-align: center;
    }

    table.hovertable th {
        background-color: #c3dde0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
        text-align: center;
    }

    table.hovertable tr {
        background-color: #d4e3e5;
        text-align: center;
    }

    table.hovertable td {
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #a9c6c9;
        text-align: center;
    }

    table.hovertable td img {
        width: 25px;
        height: 30px;
    }

    table.hovertable td img:hover {
        transform: scale(13, 20); /* 放大10倍 */
        margin-left: 20px;
        margin-top: 20px;
        padding-right: 5px;
        padding-bottom: 18px;
    }
</style>
